<!-- 用户柱状图 -->
<template>
  <div id="user-echart" style="width: 1000px;height:300px;"></div>
</template>

<script>
export default {
  // name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("user-echart"));
      // 指定图表的配置项和数据
      let option = {
        // color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "05-01",
              "05-02",
              "05-03",
              "05-04",
              "05-05",
              "05-06",
              "05-07",
              "05-08",
              "05-09",
              "05-10",
              "05-11",
              "05-12",
              "05-13",
              "05-14"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            color: '#48D1CC',
            label: {
              show: true,
              color: '#333',
              position: "top"
            },
            barWidth: "50%",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              88,
              52,
              200,
              334,
              390,
              330,
              220
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

<style scoped>
</style>

